<template>
    <!-- html -->
    <div class="Ref">
        <h2 ref="title">你好啊Ref</h2>
        <button @click="getRef">获取Ref元素</button>
    </div>
</template>


<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Ref'>
import { ref, defineExpose } from 'vue'
//ref 引用dom元素
let title = ref(null)

function getRef() {
    console.log(title.value)
}

let a = ref(0)

let b = ref(1)

let c = ref(2)

//defineExpose 暴露组件的对象 给父组件查看
defineExpose({ a, b, c })
</script>

<style scoped>
/* 样式 */
.Ref {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>